<template>
<div :class="[$style.container]">
  <div :class="[$style.title]">
    <el-link :underline="false" @click="onBack"><i class="el-icon-arrow-left ft-lg"></i></el-link>
    <span class="ml-2">钉钉扫码登录</span>
  </div>
  <dingtalk-qrcode action="login"></dingtalk-qrcode>
</div>
</template>

<script lang="ts">
import { AppModule } from '@/store'
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import DingtalkQrcode from '../dingtalk-qrcode/index.vue'

@Component({
  components: { DingtalkQrcode }
})
export default class DingtalkLogin extends Vue {
  @Prop(String) type!: 'phone' | 'username'

  @Emit('update:type') updateType (type: 'phone' | 'username' | 'registry' | 'dingtalk') {}

  onBack () {
    this.updateType('username')
  }
}
</script>

<style lang="scss" module>
.container {
}

.title {
  // margin-bottom: 12px;
  display: flex;
  align-items: center;
}
</style>
